<template>
	<view class="towstage">
		<scroll-view scroll-y class="classa-scr">
			<view :class="['classactive', currentIndex === index ? 'active' : '']" @click="cateClick(item)"
				v-for="(item, index) in classifyList" :key="index">
				<text>{{ item.name }}</text>
			</view>
		</scroll-view>
		<scroll-view scroll-y @scrolltolower="getArticleList"  class="classa-reight">
			<view class="classa-reight-sw">
				<uni-swiper-dot :dots-styles="dotsStyles" :info="bannerTop.length" :current="current" field="content" :mode="mode">
					<swiper autoplay @change="change">
						<swiper-item v-for="(item ,index) in bannerTop" :key="index">
							<view @click="goArticle(item)" class="swiper-item">
					
								<image :src="BASE_IMG + item.img"></image>
								
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="goods_list" v-if="articleList.length !== 0">
				<view v-for="(item, index) in articleList" :key="index" @click="itemClick(item)" class="goods_item">
					<uni-card :title="item.title.substring(0,12)+'···'" :sub-title="'作者：'+item.author" :extra="item.articleLabel" :thumbnail="BASE_IMG + item.img">
						<text class="uni-body">发布时间：{{item.sendTime}}</text>
					</uni-card>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import { BASE_IMG } from '@/utils/imgComBaseUrl.js';
	import {apiGetClassify,apiGetClassifyBanner,apiGetClassifyArticle} from '@/api/articleApi.js'
	const dotsStyles = ref({
		backgroundColor: 'rgba(255, 255, 255, 0.9)',
		border: '1px rgba(255, 255, 255, 0.9) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
		selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
	})
	const mode = ref('round')
	const current = ref(0)
	const currentIndex = ref(0)
	const colorbgc = ref('#fff8fb')
	const loadStatus = ref("more")
	const isLoading = ref(false) // 是否正在加载
	const classifyParm = ref({
		id:null,
		pageSize:5,
		pageCurrent:1
	})
	function cateClick(item) {
		articleList.value = []
		classifyParm.value.id = item.id
		classifyParm.value.pageCurrent = 1
		currentIndex.value = classifyList.value.findIndex((i) => i.id === item.id);
		getClassifyBanner(item.id)
		getArticleList(item.id)
	}

	function itemClick(item) {

		uni.navigateTo({
			url: '/pages/article-details/article-details?id='+ item.id
		})
	}

	function goArticle(item) {

		uni.navigateTo({
			url: '/pages/article-details/article-details?id='+ item.id
		})
	}

	function change(e) {
		current.value = e.detail.current

	}

	// 跳转到详情页
	const jumpDetail = (e) => {
		// emits('itemClick', e); 这里 emits 未定义，需要修正
	};
	
	const articleList = ref([])
	async function getArticleList(){
		loadStatus.value = 'loading'
		const {data} = await apiGetClassifyArticle(classifyParm.value)
		
		if(data.length > 0){
			articleList.value = [...articleList.value , ...data]
			classifyParm.value.pageCurrent++
			loadStatus.value = 'more'
		}else{
			loadStatus.value = 'noMore'
		}
		if(articleList.value.length < 5){
			loadStatus.value = 'noMore'
		}
	}
	
	const classifyList = ref([])
	async function getClassify(){
		
		const {data} = await apiGetClassify()
		classifyList.value = data
		const id = classifyList.value[0].id
		classifyParm.value.id = id
		getClassifyBanner(id)
		getArticleList()
	}
	const imgFlag = ref(false)
	const bannerTop = ref([])
	async function getClassifyBanner(id){
		bannerTop.value = []
		const {data} = await apiGetClassifyBanner(id)
		bannerTop.value = data
	}
	
	
	getClassify()
</script>

<style scoped lang="scss">
	.towstage {
		display: grid;
		grid-template-columns: 2fr 6fr;
	}

	.classa-scr {
		height: 100vh;
		background-color: #fff8fb;

	}

	.classa-reight {
		height: 100vh;
	}

	.active {
		background-color: #ebf2ff;
	}

	.classactive {
		padding: 40rpx 0rpx;
		display: flex;
		justify-content: center;
		border-bottom: 1rpx solid #e9f0ff;
	}

	.classa-reight-sw {
		width: 100%;
		padding: 30rpx 0;
		
		  
		swiper {
			width: 100%;
			height: 340rpx;
			padding: 0 30rpx;
			
			&-item {
				width: 100%;
				height: 100%;
				
				.swiper-item {
					width: 100%;
					height: 100%;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>